<template>
  <div class="youhui">
    <div class="card">
      <div class="left">
        <div class="top">
          <div class="d">￥</div>
          <div class="mon">20</div>
          <div class="qu">优惠券</div>
        </div>
        <div class="bottom">使用期限 2022.03.22 - 2022.03.30</div>
      </div>
      <div class="right">立即领取</div>
      <div class="more">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <ol>
          <li></li>
          <li></li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.youhui {
  height: 105rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card{
  position: relative;
  width: 337rem;
  height: 77rem;
  background: linear-gradient(to right, rgb(255, 65, 108), rgb(255, 75, 43));
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.card .left{
  width: 230rem;
  padding-left: 15rem;
}
.card .left .top{
  display: flex;
  height: 41rem;
  align-items: flex-end;
}
.card .left .top .d{
  font-size: 14rem;
  font-weight: bold;
}
.card .left .top .mon{
  font-size: 20rem;
  font-weight: bold;
  margin-right: 7rem;
}
.card .left .top .qu{
  font-size: 14rem;
}
.card .left .bottom{
  font-size: 12rem;
  margin-top: 10rem;
}
.card .right{
  width: 107rem;
  font-size: 16rem;
  line-height: 77rem;
  text-align: center;
}
/* 中间 */
.more{
  position: absolute;
  right: 105rem;
}
.more ul{
  margin-top: 8rem;
}
.more ul li{
  width: 2rem;
  background: #fff;
  height: 7rem;
  margin-bottom: 6rem;
}
.more ol li{
  position: absolute;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background: #fff;
}
.more ol li:first-child{
    top: -8.5rem;
    left: -5px;
}
.more ol li:last-child{
  bottom: -10.5rem;
  left: -5rem;
}
</style>
